<template>
  <view class="notification-page">
    <Navbar title="通知" />
    

    
    <view class="notification-list">
      <view
        v-if="notificationStore.notificationList.length === 0"
        class="empty-state"
      >
        <text>今日暂无通知</text>
      </view>
      <view v-else>
        <view
          v-for="item in notificationStore.notificationList"
          :key="item.id"
                     class="notification-item"
           @click="handleClick(item)"
        >
          <view class="notification-content">
            <view class="notification-header">
              <image
                class="notification-icon"
                :src="`/static/img/homePages/${item.iconClass}.png`"
                mode="widthFix"
              />
              <text class="notification-title">{{ item.title }}</text>
              <text class="notification-time">{{ item.time }}</text>
            </view>
            <view class="notification-detail">{{ item.content }}</view>
          </view>
          <image
            class="left-bottom"
            src="/static/img/left-bottom.png"
            mode="widthFix"
          ></image>
          <image
            class="right-bottom"
            src="/static/img/right-bottom.png"
            mode="widthFix"
          ></image>
          <image
            class="left-top"
            src="/static/img/left-top.png"
            mode="widthFix"
          ></image>
          <image
            class="right-top"
            src="/static/img/right-top.png"
            mode="widthFix"
          ></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { onMounted, onUnmounted } from 'vue'
import Navbar from '@/components/Navbar.vue';
import { useNotificationStore } from '@/store/notification';
import { mygo } from '@/utils/useNavigator';

const notificationStore = useNotificationStore();

async function handleClick(item) {
  // 如果通知已读，直接返回
  if (item.isRead) {
    return;
  }
  
  try {
    // 标记通知为已读
    const success = await notificationStore.markAsRead(item.id);
    
    if (success && item.url) {
      // 如果标记成功且有URL，进行跳转
      mygo(item.url);
    } else if (!success) {
      // 如果标记失败，显示提示
      uni.showToast({
        title: '操作失败，请重试',
        icon: 'none',
        duration: 2000
      });
    }
  } catch (error) {
    console.error('处理通知点击失败:', error);
    uni.showToast({
      title: '操作失败，请重试',
      icon: 'none',
      duration: 2000
    });
  }
}

</script>

<style scoped lang="scss">
.notification-page {
  background: #172869;
  @include page-with-header;
  min-height: 100vh;
}



.notification-list {
  padding: 40rpx 32rpx;
}

.notification-item {
  background: #112a5c;
  margin-bottom: 24rpx;
  padding: 20rpx;
  display: flex;
  align-items: flex-start;
  transition: all 0.3s ease;
  border: 1rpx solid #50daff;
  position: relative;
}



.notification-item:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
}

.notification-content {
  flex: 1;
  min-width: 0;
}

.left-bottom {
  position: absolute;
  left: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}

.right-bottom {
  position: absolute;
  right: -1rpx;
  bottom: -1rpx;
  width: 16rpx;
  height: 16rpx;
}

.left-top {
  position: absolute;
  left: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}

.right-top {
  position: absolute;
  right: -1rpx;
  top: -1rpx;
  width: 16rpx;
  height: 16rpx;
}

.notification-header {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}

.notification-icon {
  width: 32rpx;
  height: 32rpx;
  margin-right: 10rpx;
  margin-top: 8rpx;
  flex-shrink: 0;
  display: inline-block;
}

.notification-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff;
  flex: 1;
}

.notification-time {
  color: #999;
  font-size: 24rpx;
  margin-left: 16rpx;
  white-space: nowrap;
  letter-spacing: 2rpx;
}

.notification-detail {
  color: #ccc;
  font-size: 26rpx;
  line-height: 1.5;
}

.empty-state {
  text-align: center;
  color: #999;
  margin-top: 200rpx;
  font-size: 32rpx;
}
</style>
